import React, {ReactNode} from "react";
import {lazyLoad} from "@/utils";
import styles from './index.module.scss';
import {Drawer, Layout} from 'antd';
import EnumManageModule, {IManageModule, IManageBoxMode, ToolModules} from "@/pages/dv/manager";
import {merge} from 'lodash';
import * as classnames from "classnames";
import {DraggableModalBox} from "@/components";


interface IDrawerModule extends IManageModule{
  onClose?(module: string): void;
}

interface IState {
  visible: boolean;
  mode: IManageBoxMode
}

export class DrawerModule extends React.PureComponent<IDrawerModule, IState>{
  constructor(props: IDrawerModule) {
    super(props);

    this.state = {
      visible: true,
      mode: props.mode || 'drawer', // 渲染模式
    }
  }

  closeModule = () => {
    this.setState({
      visible: false
    })
    this.props.onClose && this.props.onClose(this.props.type || '');
  }

  /**
   * 组件悬浮状态
   * @param mode
   */
  onChangeMode = (mode: IManageBoxMode) => {
    this.setState({
      mode
    });
  }

  getContainer(type: ToolModules, children: ReactNode){
    const {title, component, drawerProps, siderProps, modalProps,} = this.props;

    if(!component || !type) return null;
    switch (this.state.mode) {
      case 'drawer':
        // 抽屉盒子
        return <Drawer
          placement={'left'}
          visible={this.state.visible}
          title={title}
          mask={false}
          width={320}
          bodyStyle={{
            padding: 0
          }}
          {...drawerProps}
          onClose={this.closeModule}
        >
          {children}
        </Drawer>;

      case 'sider':
        return <Layout.Sider
          className={styles.siderTheme}
          {...siderProps}
        >
          {children}
        </Layout.Sider>;

      case 'modal':
        // 悬浮
        return <DraggableModalBox
          title={title || '悬浮模态框'}
          onClose={this.closeModule}
          defaultPosition={{
            left: 32,
            top: 60
          }}
          {...modalProps}
        >
          {children}
        </DraggableModalBox>;

      default:
        return <React.Fragment>
          {children}
        </React.Fragment>
    }
  }

  /**
   * 渲染管理模块组件
   * @param type
   */
  getContent(type: ToolModules){
    const {component} = this.props;

    if(!component || !type) return null;
    const RenderBox =  ({type, ...actions}: any) => {
      const Component: any = lazyLoad(component);
      return <Component
        key={type}
        {...actions}
      />
    }
    return <RenderBox
      type={type}
      mode={this.state.mode}
      onChangeMode={this.onChangeMode}
      onClose={this.closeModule}
    />
  }

  render(): React.ReactNode {
    return <React.Fragment>
      {this.props.type ? this.getContainer(this.props.type,  this.getContent(this.props.type)) : <React.Fragment/>}
    </React.Fragment>

  }

}


interface ISwitchBox {
  selectedKeys: string[];
  onClose?(): void;
}
/**
 *
 * @param selectedKeys
 * @param onClose
 * @constructor
 */
export default function SwitchBox(
  {
    selectedKeys = [],
    onClose
  }: ISwitchBox) {
  return <React.Fragment>
    {
      selectedKeys.map(module => EnumManageModule[module] ? <DrawerModule
        key={module}
        onClose={onClose}
        {...EnumManageModule[module]}
      />: <React.Fragment />)
    }
  </React.Fragment>
}
